<!-- 用户编辑弹窗 -->
<template>
 <el-drawer
    title="账号详情"
    size="52%"
    :visible="visible"
    custom-class="ele-dialog-form"
    @update:visible="updateVisible"
    v-if="data"
  >
  <div  style="padding: 20px 0">
    <div class="head">
      <div class="full">
        <img :src=" data.info && data.info.avatar " alt="" style="width: 60px;height:60px;" >
        
        <div class="text">
          <div class="title">{{data.telphone}}</div>
           
        </div>
        <div class="text"  v-if="data.is_status==2">
          <div class="title">
            APPID：{{ data.appid }}
            <el-link type="success" @click="copy_url(data.appid)">复制</el-link>
          </div>
          <div class="title">
            秘钥：{{ data.appsecret }}
            <el-link type="success" @click="copy_url(data.appsecret)">复制</el-link>
          </div>
        </div>
       
      </div>
      <ul class="list">
        <li class="item">
          <div class="title">状态</div>

          <span v-if="data.is_status==0" class="ele-text-primary">已注册</span>
          <span v-if="data.is_status==1" class="ele-text-danger">待审核</span>
          <span v-if="data.is_status==2" class="ele-text-success">已开通</span>
          <span v-if="data.is_status==3" class="ele-text-warning">已拒绝</span>
          
        </li>

        <li class="item" v-if="data.is_status==3 && data.refuse">
          <div class="title">拒绝原因</div>
          <div>{{data.refuse}}</div>
        </li>

        <li class="item" v-if="data.type==2">
          <div class="title">当前点数</div>
          <div>¥ {{data.balance}}</div>
        </li>
       
        <li class="item" v-if="data.type==1"> 
          <div class="title">到期时间</div>
          <div>{{data.maturity_time}}</div>
        </li>

        <li class="item" v-if="data.type==1">
          <div class="title">形象克隆</div>
          <div>{{data.avatar_twin_used}} / {{data.avatar_twin_count}}</div>
        </li>

        <li class="item" v-if="data.type==1">
          <div class="title">声音克隆</div>
          <div>{{data.voice_twin_used}} / {{data.voice_twin_count}}</div>
        </li>

        <li class="item" v-if="data.type==1">
          <div class="title">视频剪辑</div>
          <div>{{data.video_clip_used}} / {{data.video_clip_count}}</div>
        </li>
      </ul>
    </div>

    <el-tabs tab-position="top" style="height: 200px;" class="tab-all tabs-on-top">
      <el-tab-pane label="基础信息">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top:20px;">

          <el-form-item label="名称:" prop="name">
            <el-input
              clearable
              v-model="form.name"
              placeholder="请输入名称"
            />
          </el-form-item>

         <!--   <el-form-item  label="是否部署独立算力:">
            <el-radio-group v-model="form.is_independence">
                <el-radio :label="1" :value="1">是</el-radio>
              <el-radio :label="0" :value="0">否</el-radio>
            
            </el-radio-group>
          </el-form-item>-->
          
              <!--<el-form-item  label="独立算力是否开启阿里云存储:"  v-if="form.is_independence==1">-->
            <!--<el-radio-group v-model="form.is_on">-->
              <!--<el-radio :label="0" :value="0">否</el-radio>-->
              <!--<el-radio :label="1" :value="1">是</el-radio>-->
            <!--</el-radio-group>-->
          <!--</el-form-item>-->


          <el-form-item label="阿里云访问域名:" prop="oss_url">
            <el-input
              clearable
              v-model="form.oss_url"
              placeholder="阿里云访问域名"
            />
            </el-form-item>
            <el-form-item label="阿里云公钥信息:" prop="oss_accessId" >
            <el-input
              clearable
              v-model="form.oss_accessId"
              placeholder="阿里云公钥信息"
            />
</el-form-item>

            <el-form-item label="阿里云私钥信息:" prop="oss_accessSecret" >
            <el-input
              clearable
              v-model="form.oss_accessSecret"
              placeholder="阿里云私钥信息"
            />
</el-form-item>

            <el-form-item label="阿里云空间名称:" prop="oss_bucket" >
            <el-input
              clearable
              v-model="form.oss_bucket"
              placeholder="阿里云空间名称"
            />
            </el-form-item>
            <el-form-item label="阿里云数据中心:" prop="oss_endpoint" >
            <el-input
              clearable
              v-model="form.oss_endpoint"
              placeholder="阿里云数据中心"
            />
          </el-form-item>


       

          <el-form-item  label="类型:">
            <el-radio-group v-model="form.type">
              <el-radio :label="1" :value="1">长期</el-radio>
              <el-radio :label="2" :value="2">包量</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item  label="高级API:" prop="open_id">
            <open-select
              placeholder="请选择平台"
              v-model="form.open_id"
            />
          </el-form-item>

          <el-form-item  label="标准API:" prop="composite_id">
            <composite-select
              placeholder="请选择平台"
              v-model="form.composite_id"
            />
          </el-form-item>


          <el-form-item label="校验类型:">
            <el-checkbox-group v-model="form.check_type">
              <el-checkbox label="1" value="1">校验IP</el-checkbox>
              <el-checkbox label="2" value="2">校验域名</el-checkbox>
            </el-checkbox-group>
          </el-form-item>


          <el-form-item label="IP白名单:" prop="white_list"  v-if="arrayIncludesValue(form.check_type, '1')">
            <el-input
              clearable
              v-model="form.white_list"
              placeholder="请输入IP白名单"
            />
            <div class="text-info">多个IP用英文 , 隔开</div>
          </el-form-item>

         
          <el-form-item label="域名:" prop="domain" v-if="arrayIncludesValue(form.check_type, '2')">
            <el-input
              clearable
              v-model="form.domain"
              placeholder="请输入域名"
            />
           
          </el-form-item>


          <el-form-item v-if="form.type=='1'" label="到期时间:" prop="maturity_time" >
            <el-date-picker
              v-model="form.maturity_time"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item v-if="isUpdate" label="APPID:" prop="appid" >
            <el-input
              clearable
              v-model="form.appid"
              :disabled="true"
              placeholder="请输入秘钥ID"
              style="width:320px;"
            />
          </el-form-item>

          <el-form-item v-if="isUpdate" label="APPSECRET:" prop="appsecret" >
            <el-input
              clearable
              v-model="form.appsecret"
              :disabled="true"
              placeholder="请输入秘钥"
              style="width:320px;"
            />
            <el-button type="primary"  @click="resetKey()">重新生成</el-button>

          </el-form-item>

          <el-form-item label="形象克隆次数:" prop="avatar_twin_count" v-if="data.type==1">
            <el-input
              clearable
              v-model="form.avatar_twin_count"
              placeholder="请输入形象克隆次数"
            />
          </el-form-item>
          <el-form-item label="声音克隆次数:" prop="voice_twin_count" v-if="data.type==1">
            <el-input
              clearable
              v-model="form.voice_twin_count"
              placeholder="请输入声音克隆次数"
            />
          </el-form-item>

          <el-form-item label="视频剪辑秒数:" prop="video_clip_count" v-if="data.type==1">
            <el-input
              clearable
              v-model="form.video_clip_count"
              placeholder="请输入视频剪辑秒数"
            />
          </el-form-item>

          
          <el-form-item label="线路一合成并发:" prop="one_synthesis_concurrency">
            <el-input
              clearable
              v-model="form.one_synthesis_concurrency"
              placeholder="线路一合成并发"
            />
          </el-form-item>

          
          <el-form-item label="线路二合成并发:" prop="two_synthesis_concurrency" >
            <el-input
              clearable
              v-model="form.two_synthesis_concurrency"
              placeholder="线路二合成并发"
            />
          </el-form-item>
          
          <el-form-item label="线路三合成并发:" prop="three_synthesis_concurrency">
            <el-input
              clearable
              v-model="form.three_synthesis_concurrency"
              placeholder="线路三合成并发"
            />
          </el-form-item>

             
          <el-form-item label="线路四合成并发:" prop="four_synthesis_concurrency">
            <el-input
              clearable
              v-model="form.four_synthesis_concurrency"
              placeholder="线路四合成并发"
            />
          </el-form-item>

          <el-form-item label="冻结状态:">
            <el-switch
              :active-value="2"
              :inactive-value="1"
              v-model="form.is_freeze"
            />
            <el-tooltip
              placement="top"
              content="选择冻结则账号不可登录等操作"
            >
              <i
                class="el-icon-_question"
                style="vertical-align: middle; margin-left: 8px"
              ></i>
            </el-tooltip>
          </el-form-item>

          <el-form-item label="备注:" prop="remark" >
            <el-input
              clearable
              v-model="form.remark"
              placeholder="请输入备注"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="save">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="资质信息" v-if="data.info">
        
        <div class="section" v-if="data.info && data.info.type == 1">
          <div class="title">身份证照</div>
          <ul class="list">
            <li class="item">
              <div class="value">
                <el-image
                  v-for="(item, index) in idCardPic" v-bind:key="item.id"
                  style="width: 80px; height: 80px"
                  :src="idCardPic[index]" 
                  :preview-src-list="idCardPic"
                  :zIndex="9999"
                />
              </div>
            </li>
          </ul>
        </div>
        <div class="section" v-if="data.info && data.info.type == 1">
          <div class="title">申请资料</div>
          <ul class="list">
            <li class="item">
              <div>身份证名称：</div>
              <div class="value"> {{ data.info.id_card_name }}</div>
            </li>
            
            <li class="item">
              <div>身份证号码：</div>
              <div class="value">{{ data.info.id_card_no }}</div>
            </li>

            <li class="item">
              <div>身份证省市区：</div>
              <div class="value">{{ data.info.id_card_address }}</div>
            </li>

            <li class="item">
              <div>身份证详细地址：</div>
              <div class="value">{{ data.info.id_card_detail }}</div>
            </li>
          </ul>
        </div>
        <div class="section" v-if="data.info && data.info.type == 2">
          <div class="title">营业执照</div>
          <ul class="list">
            <li class="item">
              <div class="value">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="data.info.business_license" 
                  :preview-src-list="businessPic"
                  :zIndex="9999"
                />
              </div>
            </li>
          </ul>
        </div>
        <div class="section" v-if="data.info && data.info.type == 2">
          <div class="title">申请资料</div>
          <ul class="list">
            <li class="item">
              <div>企业全称：</div>
              <div class="value"> {{ data.info.company_name }}</div>
            </li>

            <li class="item">
              <div>联系人名称：</div>
              <div class="value">{{ data.info.contact_name }}</div>
            </li>

            <li class="item">
              <div>联系人电话：</div>
              <div class="value">{{ data.info.contact_phone }}</div>
            </li>
            
            <li class="item">
              <div>营业执照编号：</div>
              <div class="value">{{ data.info.business_no }}</div>
            </li>

            <li class="item">
              <div>企业所在省市区：</div>
              <div class="value">{{ data.info.company_address }}</div>
            </li>

            <li class="item">
              <div>企业详细地址：</div>
              <div class="value">{{ data.info.company_detail }}</div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>  
  </div>
    <uploadPictures
      :isChoice="isChoice"
      :visible.sync="modalPic"
      @getPic="getPic"
      :gridBtn="gridBtn"
      :gridPic="gridPic"
      :title="modalTitle"
    ></uploadPictures>
  </el-drawer>
</template>

<script>
  import uploadPictures from "@/components/uploadPictures";
  import EleImageUpload from 'ele-admin/es/ele-image-upload';
  import TinymceEditor from '@/components/TinymceEditor';
  import OpenSelect from  '@/views/open/components/open-select';
  import CompositeSelect from  '@/views/composite/components/composite-select';
  import request from '@/utils/request';
  import { add,update,resetKey } from '@/api/account/list';
  const DEFAULT_FORM = {
    id: 0,
    type:0,
    open_id:0,
    check_type:['1'],
    name: '',
    telphone :'',
    password :'',
    domain :'',
    white_list :'',
    avatar_twin_count :0,
    voice_twin_count :0,
    video_clip_count :0,
    appid :'',
    appsecret :'',
    maturity_time: '',
    is_freeze :1,
    info:[],
    remark:'',
    composite_id:0,
    is_independence:0,
     is_on: '',
      oss_bucket: '',
      oss_accessId: '',
      oss_accessSecret: '',
      oss_endpoint: '',
        oss_url: ''

  };

  export default {
    name: 'AccountEdit',
    components: { EleImageUpload,uploadPictures,TinymceEditor ,OpenSelect,CompositeSelect },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },
    data() {
      return {
        modalTitle:'选择图片',
        modalPic: false,
        isChoice: "单选",
        gridBtn: {
          xl: 4,
          lg: 8,
          md: 8,
          sm: 8,
          xs: 8,
        },
        gridPic: {
          xl: 6,
          lg: 8,
          md: 12,
          sm: 12,
          xs: 12,
        },
        // 表单数据
        form: { ...DEFAULT_FORM },
        // 表单验证规则
        rules: {
          title: [
            {
              required: true,
              message: '请输入账号标题',
              trigger: 'blur'
            }
          ]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        idCardPic:[],
        businessPic:[],
      };
    },
    methods: {
      arrayIncludesValue(array, value) {
        return array.includes(value);
      },
      // 选择图片
      modalPicTap(tit, picTit,openTitle) {
        this.modalTitle = openTitle;
        this.isChoice = tit === "dan" ? "单选" : "多选";
        this.picTit = picTit;
        this.modalPic = true;
      },
      // 选中图片
      getPic(pc) {
        switch (this.picTit) {
          case "pic_url":
            this.form.pic_url = pc.satt_dir;
            break;
        }
        this.modalPic = false;
      },
      /* 重置秘钥 */
      resetKey(row) {
        this.$confirm('确定要重置此账号的秘钥吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading({ lock: true });
            resetKey(this.data.id)
              .then((msg) => {
                loading.close();
                this.updateVisible(false);
                this.$emit('done');
                this.$message.success(msg);
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return false;
          }

          this.loading = true;
          const data = {
            ...this.form,
          };

          const saveOrUpdata = this.isUpdate ? update : add;

          saveOrUpdata(data).then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.updateVisible(false);
            this.$emit('done');
          }).catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      copy_url(content){
        if (window.clipboardData) {
          window.clipboardData.setData('text', content);
        } else {
          (function (content) {
            //oncopy 事件在用户拷贝元素上的内容时触发。
            document.oncopy = function (e) {
              e.clipboardData.setData('text', content);
              e.preventDefault(); //取消事件的默认动作
              document.oncopy = null;
            }
          })(content);
          document.execCommand('Copy');
        }
        this.$message.success('复制成功！');
      },
    },
    watch: {
      visible(visible) {
        if (visible) {
          if (this.data) {

            this.$util.assignObject(this.form, {
              ...this.data
            });

            console.log(this.form)

            if(this.data.info){
              this.idCardPic = [
                this.data.info.id_card_front,
                this.data.info.id_card_verso,
              ];
              this.businessPic = [
                this.data.info.business_license
              ];
            }

            

            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$refs['form'].clearValidate();
          this.form = { ...DEFAULT_FORM };
        }
      }
    }
  };
</script>
<style lang="less" scoped>

.pOrder {
    color: #1890ff;
  }

/deep/ .tab-all .el-tabs__header {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
}
/deep/ .tab-all .el-tabs__item {
   padding:0 20px !important;
}

.head {
    padding: 0 35px 24px;
}
.head .full {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.head .full .order_icon {
    width: 60px;
    height: 60px;
}
.head .full .text {
    align-self: center;
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    font-size: 13px;
    color: #606266;
}
.head .full .text .title {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: rgba(0,0,0,.85);
}
.mr20 {
    margin-right: 20px!important;
}
.head .list {
    display: flex;
    margin-top: 20px;
    overflow: hidden;
    list-style: none;
    padding: 0;
}
.head .list .item {
    -webkit-box-flex: 0;
    flex: none;
    width: 200px;
    font-size: 14px;
    line-height: 14px;
    color: rgba(0,0,0,.85);
}
.head .list .item .title {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 13px;
    color: #666;
}
.el-tabs--border-card {
    border: none;
    box-shadow: none;
}
.el-tabs--border-card>.el-tabs__header {
    border: none;
    height: 40px;
}
/deep/.el-tabs__content {
    padding: 0 35px;
}
.el-image {
    width: 36px;
    height: 36px;
    margin-right: 10px;
}
.section {
    padding: 25px 0;
    border-bottom: 1px dashed #eee;
}
.section .title {
    padding-left: 10px;
    border-left: 3px solid #0256ff;
    font-size: 15px;
    line-height: 15px;
    color: #303133;
}
.section .list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}
.section .item:nth-child(3n+1) {
    padding-right: 20px;
}
.section .item {
    -webkit-box-flex: 0;
    flex: 0 0 32%;
    display: flex;
    margin-top: 16px;
    font-size: 13px;
    color: #666;
}
.section .value {
    -webkit-box-flex: 1;
    flex: 1;
}
.cell {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-right: 10px;
}
.tab {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.gary {
    color: #aaa;
}
.line1 {
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>


